<template>
  <el-row>
    <el-row>

      <!-- 地图 -->
      <ElCard
          style="height: 70vh">
        <div
            slot="header">
          <span
              style="position: absolute;left: 45%;top: 1vh"
          >点击行政区域查询</span>
        </div>
        <el-row
            style="height: 65vh;margin-top: 1vh">
          <Map
              :mapInfo="mapSetting"
              @mapBeClick="mapBeClick"
          ></Map>
        </el-row>
      </ElCard>

    </el-row>

    <el-row
        style="margin-top: 1vh">

      <!-- 滑块 -->
      <ElCard
          style="height: 15vh">
        <div
            slot="header">
          <span
              style="position: absolute;left: 45%;top: 1vh"
          >时间范围</span>
          <span
              style="float: right"
          >{{ soildText }}</span>
        </div>

        <SelectForm
            :reset="resetSlider"
            @sliderInput="sliderInput"
            @sliderChange="sliderChange"
        />

      </ElCard>

    </el-row>

    <!-- 表格 -->
    <el-row
        style="margin-top: 1vh">

      <!--   表格   -->
      <ElCard
          style="height: auto">
        <span
            slot="header">黑广播列表</span>
        <Table
            :time="time"
            :adcode="adcode"
        />
      </ElCard>

    </el-row>

  </el-row>
</template>

<script>
// --------------- element-ui ---------------------
import ElCard from "../../../../components/element-ui/elCard"
//--------------- AMap ------------------
import Map from "../../../../components/AMap/views/map-selectByArea";
import {mapSetting} from "../../../../components/AMap/map_setting"
// ------------- 自定义组件 ----------------
import SelectForm from "./areabroad-cpt/selectForm"
import Table from "./areabroad-cpt/table"

export default {
  components: {
    ElCard,
    Map,
    SelectForm,
    Table
  },
  computed: {
    /**
     * 地图配置
     * */
    mapSetting: function () {
      return mapSetting("brocastRange")
    },

  },
  data() {
    return {
      // ----------- 弹窗 -------------
      isMapVisiable: false,
      //  ----------- 查询表单 --------------
      soildText: "",
      adcode: undefined,
      time: -1,
      resetSlider: false
    }
  },
  methods: {
    //  ------------ 事件 --------------

    /**
     * 滑块值发生改变
     * @param val
     */
    sliderChange: function (val) {
      if (val === 0) {
        this.time = -1
      } else {
        this.time = Number(val)
      }
    },

    /**
     * 滑块值实时变化
     * @param val
     */
    sliderInput: function (val) {
      let now = new Date();
      now.setDate(now.getDate() - val);
      this.soildText = `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日之后的黑广播`;
      if (val === 0) {
        this.soildText = ""
      }
    },
    /**
     * 地图被点击
     * @param val
     */
    mapBeClick: function (val) {
      if (val === undefined) {
        this.resetSlider = !this.resetSlider;
      }
      this.adcode = val;
    }
  },
}
</script>

<style>
</style>